<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能文档生成系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .input-section {
            margin-bottom: 30px;
        }

        .input-label {
            font-size: 1.2em;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            display: block;
        }

        .question-input {
            width: 100%;
            min-height: 120px;
            padding: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            font-size: 16px;
            font-family: inherit;
            resize: vertical;
            transition: all 0.3s ease;
            background: #fafafa;
        }

        .question-input:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 20px rgba(79, 172, 254, 0.2);
            background: white;
        }

        .submit-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
            margin: 20px auto 0;
            position: relative;
            overflow: hidden;
        }

        .submit-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .loading {
            display: none;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
        }

        .loading.active {
            display: flex;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #4facfe;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-right: 15px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .status-section {
            margin: 30px 0;
            padding: 20px;
            border-radius: 15px;
            display: none;
        }

        .status-section.active {
            display: block;
        }

        .status-processing {
            background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
            color: #2d3436;
        }

        .status-success {
            background: linear-gradient(135deg, #55efc4 0%, #81ecec 100%);
            color: #2d3436;
        }

        .status-error {
            background: linear-gradient(135deg, #fd79a8 0%, #fdcb6e 100%);
            color: #2d3436;
        }

        .template-match {
            background: rgba(116, 75, 162, 0.1);
            border-left: 4px solid #764ba2;
            padding: 15px;
            margin: 15px 0;
            border-radius: 8px;
        }

        .download-section {
            text-align: center;
            margin-top: 30px;
        }

        .download-btn {
            background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
            color: white;
            text-decoration: none;
            padding: 15px 30px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 16px;
            display: inline-block;
            transition: all 0.3s ease;
            margin: 10px;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 184, 148, 0.4);
        }

        .template-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .template-card {
            background: rgba(79, 172, 254, 0.1);
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .template-card:hover {
            border-color: #4facfe;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .template-card.selected {
            border-color: #764ba2;
            background: rgba(118, 75, 162, 0.2);
        }

        .examples {
            background: rgba(0, 0, 0, 0.05);
            padding: 20px;
            border-radius: 15px;
            margin: 20px 0;
        }

        .examples h3 {
            margin-bottom: 15px;
            color: #333;
        }

        .example-item {
            background: white;
            padding: 10px 15px;
            margin: 8px 0;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-left: 4px solid #4facfe;
        }

        .example-item:hover {
            background: #f8f9fa;
            transform: translateX(5px);
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
            margin: 20px 0;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4facfe, #00f2fe);
            width: 0%;
            transition: width 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>智能文档生成系统</h1>
            <p>基于AI的文档自动生成与模板匹配服务</p>
        </div>
        
        <div class="main-content">
            <div class="input-section">
                <label class="input-label">请描述您需要生成的文档类型和内容要求：</label>
                <textarea 
                    class="question-input" 
                    id="questionInput"
                    placeholder="例如：帮我生成一份项目周报，包含本周完成的工作、遇到的问题和下周计划..."
                ></textarea>
                
                <button class="submit-btn" id="submitBtn" onclick="generateDocument()">
                    生成文档
                </button>
            </div>

            <div class="examples">
                <h3>💡 示例问题</h3>
                <div class="example-item" onclick="fillExample(this)">
                    帮我生成一份项目周报，包含本周工作总结和下周计划
                </div>
                <div class="example-item" onclick="fillExample(this)">
                    生成一份会议纪要模板，需要包含议题、决议和行动项
                </div>
                <div class="example-item" onclick="fillExample(this)">
                    制作一份产品需求文档，包含功能描述和验收标准
                </div>
                <div class="example-item" onclick="fillExample(this)">
                    创建一份技术方案设计文档，包含架构图和实施计划
                </div>
            </div>

            <div class="loading" id="loadingSection">
                <div class="spinner"></div>
                <span>正在分析您的需求并匹配最佳模板...</span>
            </div>

            <div class="progress-bar" id="progressBar" style="display: none;">
                <div class="progress-fill" id="progressFill"></div>
            </div>

            <div class="status-section" id="statusSection">
                <div id="statusContent"></div>
            </div>
        </div>
    </div>

    <script>
        // 模拟的文档模板数据
        const documentTemplates = {
            '项目周报': {
                id: 'weekly_report',
                name: '项目周报模板',
                fields: ['项目名称', '本周完成工作', '遇到问题', '下周计划', '风险提示'],
                description: '适用于项目进度汇报'
            },
            '会议纪要': {
                id: 'meeting_minutes',
                name: '会议纪要模板',
                fields: ['会议主题', '参会人员', '议题讨论', '决议事项', '行动项'],
                description: '适用于各类会议记录'
            },
            '需求文档': {
                id: 'requirement_doc',
                name: '产品需求文档',
                fields: ['需求背景', '功能描述', '用户故事', '验收标准', '优先级'],
                description: '适用于产品功能需求'
            },
            '技术方案': {
                id: 'technical_design',
                name: '技术方案设计',
                fields: ['方案背景', '技术架构', '实施步骤', '风险评估', '时间安排'],
                description: '适用于技术方案设计'
            }
        };

        let currentStep = 0;
        const totalSteps = 5;

        function fillExample(element) {
            document.getElementById('questionInput').value = element.textContent;
        }

        async function generateDocument() {
            const question = document.getElementById('questionInput').value.trim();
            
            if (!question) {
                alert('请输入您的需求描述');
                return;
            }

            // 重置状态
            currentStep = 0;
            document.getElementById('submitBtn').disabled = true;
            document.getElementById('loadingSection').classList.add('active');
            document.getElementById('statusSection').classList.remove('active');
            document.getElementById('progressBar').style.display = 'block';
            
            try {
                // 步骤1: 需求分析
                await simulateStep('正在分析您的需求...', 1);
                
                // 步骤2: 模板匹配
                const matchedTemplate = await simulateTemplateMatching(question);
                await simulateStep(`匹配到模板: ${matchedTemplate.name}`, 2);
                
                // 步骤3: 内容生成
                await simulateStep('正在生成文档内容...', 3);
                
                // 步骤4: 文档组装
                await simulateStep('正在组装文档结构...', 4);
                
                // 步骤5: 完成生成
                await simulateStep('文档生成完成!', 5);
                
                // 显示成功结果
                showSuccessResult(matchedTemplate, question);
                
            } catch (error) {
                showError(error.message);
            } finally {
                document.getElementById('submitBtn').disabled = false;
                document.getElementById('loadingSection').classList.remove('active');
                document.getElementById('progressBar').style.display = 'none';
            }
        }

        async function simulateStep(message, step) {
            return new Promise(resolve => {
                setTimeout(() => {
                    currentStep = step;
                    updateProgress();
                    document.querySelector('.loading span').textContent = message;
                    resolve();
                }, 800 + Math.random() * 400);
            });
        }

        function updateProgress() {
            const progress = (currentStep / totalSteps) * 100;
            document.getElementById('progressFill').style.width = progress + '%';
        }

        async function simulateTemplateMatching(question) {
            // 简单的关键词匹配逻辑
            const keywords = {
                '项目周报': ['周报', '项目', '进度', '工作总结', '计划'],
                '会议纪要': ['会议', '纪要', '议题', '决议'],
                '需求文档': ['需求', '功能', '产品', '用户故事'],
                '技术方案': ['技术', '方案', '架构', '设计', '实施']
            };
            
            let bestMatch = '项目周报'; // 默认模板
            let maxScore = 0;
            
            for (const [templateName, templateKeywords] of Object.entries(keywords)) {
                const score = templateKeywords.reduce((acc, keyword) => {
                    return acc + (question.includes(keyword) ? 1 : 0);
                }, 0);
                
                if (score > maxScore) {
                    maxScore = score;
                    bestMatch = templateName;
                }
            }
            
            return documentTemplates[bestMatch];
        }

        function showSuccessResult(template, question) {
            const statusSection = document.getElementById('statusSection');
            const statusContent = document.getElementById('statusContent');
            
            // 生成文件名
            const timestamp = new Date().toISOString().slice(0, 19).replace(/[:-]/g, '');
            const userId = 'user_' + Math.random().toString(36).substr(2, 6);
            const fileName = `${template.name}-${userId}-${timestamp}.doc`;
            
            statusContent.innerHTML = `
                <h3>🎉 文档生成成功！</h3>
                <div class="template-match">
                    <h4>📋 使用模板：${template.name}</h4>
                    <p><strong>模板说明：</strong>${template.description}</p>
                    <p><strong>包含字段：</strong>${template.fields.join('、')}</p>
                </div>
                <div style="margin: 20px 0; padding: 15px; background: rgba(0, 0, 0, 0.05); border-radius: 8px;">
                    <p><strong>📄 生成的文档文件：</strong></p>
                    <p style="font-family: monospace; color: #666;">${fileName}</p>
                </div>
                <div class="download-section">
                    <a href="#" class="download-btn" onclick="downloadDocument('${fileName}')">
                        📥 下载文档
                    </a>
                    <a href="#" class="download-btn" onclick="previewDocument('${fileName}')" style="background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);">
                        👁️ 预览文档
                    </a>
                </div>
                <div style="margin-top: 20px; font-size: 14px; color: #666;">
                    <p>💡 提示：文档已根据您的需求自动填充相关内容，您可以下载后进一步编辑。</p>
                </div>
            `;
            
            statusSection.className = 'status-section active status-success';
        }

        function showError(message) {
            const statusSection = document.getElementById('statusSection');
            const statusContent = document.getElementById('statusContent');
            
            statusContent.innerHTML = `
                <h3>❌ 文档生成失败</h3>
                <p>${message}</p>
                <div style="margin-top: 15px;">
                    <p>💡 建议：</p>
                    <ul style="margin-left: 20px; margin-top: 10px;">
                        <li>请提供更具体的需求描述</li>
                        <li>确保网络连接正常</li>
                        <li>如问题持续，请联系技术支持</li>
                    </ul>
                </div>
            `;
            
            statusSection.className = 'status-section active status-error';
        }

        function downloadDocument(fileName) {
            // 模拟文档下载
            const link = document.createElement('a');
            link.href = 'data:application/msword;base64,UEsDBBQACAgIAA=='; // 模拟数据
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            // 显示下载提示
            alert(`文档 "${fileName}" 下载成功！\n\n在实际环境中，这里会从服务器下载真实的Word文档。`);
        }

        function previewDocument(fileName) {
            // 模拟文档预览
            alert(`正在预览文档 "${fileName}"\n\n在实际环境中，这里会打开文档预览窗口或跳转到预览页面。`);
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('智能文档生成系统已加载');
        });
    </script>
</body>
</html>